<template>
  <div>
    <div><h1 style="color: #0a0a80"></h1></div>
    <span>
      <div id="c1"></div>
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="formInline.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit2(),Graph()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="stuMain">
        <el-table stripe border :data="student" style="width: 97%">
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="id" label="学号"> </el-table-column>
          <el-table-column prop="clazz" label="班级"> </el-table-column>
          <el-table-column prop="room" label="宿舍号"> </el-table-column>
          <el-table-column prop="height" label="身高(cm)"> </el-table-column>
          <el-table-column prop="weight" label="体重(kg)"> </el-table-column>
          <el-table-column prop="mileageTerm1" label="跑步数1(km)">
          </el-table-column>
          <el-table-column prop="mileageTerm2" label="跑步数2(km)">
          </el-table-column>
          <el-table-column prop="mileageTerm3" label="跑步数3(km)">
          </el-table-column>
          <el-table-column prop="mileageTerm4" label="跑步数4(km)">
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-left: 50px">
        <h1 style="color: #36788c">
          第一学期进度---------------------------------->第二学期进度---------------------------------->第三学期进度---------------------------------->第四学期进度
        </h1>
      </div>
      <el-progress
        type="circle"
        :percentage="this.p1"
        :color="color1"
        style="margin-left: 50px"
      ></el-progress>
      <el-progress
        type="circle"
        :percentage="this.p2"
        :color="color2"
        style="margin-left: 200px"
      ></el-progress>
      <el-progress
        type="circle"
        :percentage="this.p3"
        :color="color3"
        style="margin-left: 200px"
      ></el-progress>
      <el-progress
        type="circle"
        :percentage="this.p4"
        :color="color4"
        style="margin-left: 200px"
      ></el-progress>
      <div id="test" style="width: 100%; height: 600px"></div>
      <div>
        <center>
        <el-card  class="box-card" style="color:#67C23A">
                <div slot="header" class="clearfix" >
                <span>BMI建议</span>
                </div>
              <div style="white-space:pre-line">{{ msg }}</div>
                </el-card>
      </center>
      </div>
    </span>
  </div>



</template>

<script>
import { Liquid } from "@antv/g2plot";
import * as echarts from "echarts";
export default {
  name: "studentSeach",
  mounted() {this.Graph()},
  data() {
    return {
      msg: '',
      formInline: {
        name: "",
      },
      student: [],
      p1: 0,
      p2: 0,
      p3: 0,
      p4: 0,
      color1: "#1989fa",
      color2: "#1989fa",
      color3: "#1989fa",
      color4: "#1989fa",
    };
  },
  mounted() {
  },

  methods: {
    onSubmit2() {
      this.getRequest("/student/" + this.formInline.name, {}).then((resp) => {
        if (resp) {
          this.student = resp;

          const val = (resp[0].weight / ((resp[0].height*0.01)*(resp[0].height*0.01)));
          if (val >= 28) {
            this.msg = '您好' +resp[0].name+'。我是健康小卫士！你的BMI指数已超标！\n' +
                    'Tip1:建议杜绝垃圾食品和过于油腻的食物，多吃富含营养的低热量食品（大豆、蔬菜、无脂或低脂牛奶）\n' +
                    'Tip2:不喝酒不喝饮料，多喝水，饭前喝一杯水，增强饱腹感，减少进餐食量；\n' +
                    'Tip3:每天坚持一个小时以上的中高等强度运动，例如跑步、跳绳等，根据个人身体情况进行噢。';

          } else if (val >= 24) {
            this.msg = '您好' +resp[0].name+'。我是健康小卫士！你的BMI指数偏高！\n' +
                    'Tip1:饮食方面建议少吃零食，甜品、油炸类等高热量食物，多吃蔬菜水果和膳食纤维及富含营养且低热量的食物；\n' +
                    'Tip2:可以适当进行有氧运动，如跑步、骑自行车等，提高代谢速率，加速消耗体内的脂肪和热量；\n' +
                    'Tip3:避免熬夜，保持良好的作息习惯，才能拥有健康的身材噢。';

          } else if (val >= 20) {
            this.msg = '您好' +resp[0].name+'。我是健康小卫士！你的BMI指数为标准。\n' +
                    'Tip1:您的BMI指数正常，身体处于优秀水平，请继续保持膳食平衡和适量运动；\n' +
                    'Tip2:建议通过适当的健身保持好身材噢，可以通过专业运动完善身材的线条及健康的质量；\n' +
                    'Tip3:避免熬夜，保持良好的作息习惯，会越变越好看噢。';

          } else if (val >= 16) {
            this.msg = '您好' +resp[0].name+'。我是健康小卫士！你的BMI指数偏低！\n' +
                    'Tip1:建议您饮食方面不要偏食和挑食，可适量增加高蛋白食品（鸡蛋，牛奶等），同时宜多进食含脂肪，碳水化合物（淀粉、糖类）较丰富的食物；\n' +
                    'TIp2:可进行一定的锻炼，有助于改善食欲，使肌肉强壮，体魄健美；\n' +
                    'Tip3:在运动方式上，建议慢跑，不仅能消耗能量，同时也能使胃口变好噢。';

          }

          this.p1 = (resp[0].mileageTerm1 / 120).toFixed(2) * 100;
          if (this.p1 < 50) this.color1 = "#e6a23c";
          else if (this.p1 > 90) this.color1 = "#5cb87a";
          this.p2 = (resp[0].mileageTerm2 / 120).toFixed(2) * 100;
          if (this.p2 < 50) this.color2 = "#e6a23c";
          else if (this.p2 > 90) this.color2 = "#5cb87a";
          this.p3 = (resp[0].mileageTerm3 / 120).toFixed(2) * 100;
          if (this.p3 < 50) this.color3 = "#e6a23c";
          else if (this.p3 > 90) this.color3 = "#5cb87a";
          this.p4 = (resp[0].mileageTerm4 / 120).toFixed(2) * 100;
          if (this.p4 < 50) this.color4 = "#e6a23c";
          else if (this.p4 > 90) this.color4 = "#5cb87a";
          const gauge = new Liquid("container", {
            percent: (resp[0].mileageTerm4 / 120).toFixed(4),
            shape: "diamond",
            outline: {
              border: 4,
              distance: 8,
            },
            wave: {
              length: 128,
            },
          });

          gauge.render();
        }
      });
    },
    Graph() {
      this.getRequest("/student/" + this.formInline.name).then((resp) => {
        this.student = resp;
        const chartDom = document.getElementById("test");
        const myChart = echarts.init(chartDom);
        const option = {
          series: [
            {
              type: "gauge",
              startAngle: 180,
              endAngle: 0,
              min: 12,
              max: 32,
              splitNumber:10,
              axisLine: {
                lineStyle: {
                  width: 6,
                  color: [
                    [0.25, "#7CFFB2"],
                    [0.5, "#58D9F9"],
                    [0.75, "#FDDD60"],
                    [1, "#FF6E76"],
                  ],
                },
              },
              pointer: {
                icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                length: "12%",
                width: 20,
                offsetCenter: [0, "-60%"],
                itemStyle: {
                  color: "auto",
                },
              },
              axisTick: {
                length: 12,
                lineStyle: {
                  color: "auto",
                  width: 2,
                },
              },
              splitLine: {
                length: 20,
                lineStyle: {
                  color: "auto",
                  width: 5,
                },
              },
              axisLabel: {
                color: "#464646",
                fontSize: 20,
                distance: -70,
                formatter: function(value) {
                  if (value === 28) {
                    return "肥胖";
                  } else if (value === 24) {
                    return "过重";
                  } else if (value === 20) {
                    return "正常";
                  } else if (value === 16) {
                    return "过轻";
                  }
                },
              },
              title: {
                offsetCenter: [0, "-20%"],
                fontSize: 30,
              },
              detail: {
                fontSize: 50,
                offsetCenter: [0, "0%"],
                valueAnimation: true,
                formatter: function(value) {
                  return Math.round(value);
                },
                color: "auto",
              },
              data: [
                {
                  value: (resp[0].weight / ((resp[0].height*0.01)*(resp[0].height*0.01))),
                  name: "BMI",
                },
              ],
            },
          ],
        };
        myChart.setOption(option);
      });
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
